<template>
  <div class="add-page f-c">
    <el-tabs v-model="activeName" @tab-click="getNodeList">
      <el-tab-pane label="项目立项阶段" name="1" />
      <el-tab-pane label="规划许可阶段" name="2" />
      <el-tab-pane label="施工许可阶段" name="3" />
      <el-tab-pane label="竣工验收阶段" name="4" />
      <!--                <el-tab-pane label="标" name="5" />-->
    </el-tabs>
    <div v-if="activeName == 5">
      <div class="f-r f-w" style="width: 600px;margin-left: 50px">
        <div
          v-for="(item, index) in nodeList"
          :key="item.productCode"
          class="node-card f-r a-c j-b "
        >
          <div class="node-name f-g">{{ item.productName }}</div>
          <div class="node-btn f-r a-c">
            <i class="el-icon-delete" @click="onEditDate(index)" />
          </div>
        </div>
      </div>
      <el-button type="primary" @click="onSave">保存</el-button>
      <el-button @click="dialogValue = false">取 消</el-button>
    </div>
    <el-tabs
      v-else
      v-model="activeName2"
      style="margin-top: 40px"
      tab-position="left"
      @tab-click="getNodeList"
    >
      <el-tab-pane label="必经流程" name="1" />
      <el-tab-pane label="可选流程" name="2" />
      <div class="f-r f-w" style="margin-left: 50px">
        <div
          v-for="(item, index) in nodeList"
          :key="item.productCode"
          class="node-card f-r a-c j-b "
        >
          <div>
            <div class="node-name f-g">{{ item.productName }}</div>
            <div class="node-date">开始时间：{{ item.startTime }}</div>
            <div class="node-date">结束时间：{{ item.endTime }}</div>
          </div>
          <div
            class="node-btn f-r a-c"
            style="display:block;text-align: center;"
          >
            <i
              class="el-icon-date"
              @click="onEditDate(item)"
              style="margin-top: 15px;"
            />
            <div class="type" @click="onEditType(item)">
              {{ status[item.status] }}
            </div>
          </div>
        </div>
      </div>
    </el-tabs>
    <el-dialog
      title="设置时间"
      :visible.sync="addDialog"
      width="600px"
      append-to-body
    >
      <el-form
        ref="formRef"
        :modal="ruleForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="时间">
          <el-date-picker
            v-model="ruleForm.date"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: left">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="onSaveNode">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="设置状态"
      :visible.sync="addDialog2"
      width="600px"
      append-to-body
    >
      <el-form ref="formRef" label-width="80px">
        <el-form-item label="状态">
          <el-select v-model="type">
            <el-option key="0" :value="0" label="未完成">未完成</el-option>
            <el-option key="1" :value="1" label="进行中">进行中</el-option>
            <el-option key="2" :value="2" label="已完成">已完成</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: left">
        <el-button @click="addDialog2 = false">取 消</el-button>
        <el-button type="primary" @click="onSavetype">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { http_project_process } from "@/api";

export default {
  name: "Config",
  components: {},
  data() {
    return {
      dialogValue: false,
      activeName: "1",
      activeName2: "1",
      nodeList: [],
      addDialog: false,
      addDialog2: false,
      currentNode: [],
      ruleForm: {
        date: ""
      },
      rules: {
        date: [{ required: true, message: "不能为空" }]
      },
      type: "",
      typeid: "",
      status: ["未完成", "进行中", "已完成"]
    };
  },
  created() {
    this.getNodeList();
  },
  methods: {
    filterDate(node) {
      const { startTime, endTime } = node;
      if (startTime && endTime) {
        return startTime + " - " + endTime;
      }
      return "";
    },

    // 获取类别下事项数据 根据阶段 1项目立项阶段 2规划许可阶段 3施工许可阶段 4竣工验收阶段
    getNodeList() {
      http_project_process
        .read({
          projectId: this.$route.query.id,
          stage: this.activeName,
          process: this.activeName2 // 是否必要
        })
        .then(res => {
          this.nodeList = res.data.productList || [];
        })
        .catch(() => {
          this.nodeList = [];
        });
    },
    onEditDate(node) {
      const { startTime, endTime } = node;
      this.currentNode = node;
      if (startTime && endTime) {
        this.ruleForm.date = [startTime, endTime];
      }
      this.addDialog = true;
    },
    onEditType(item) {
      this.type = item.status;
      this.typeid = item.id;
      this.addDialog2 = true;
    },
    onSaveNode() {
      // this.$refs.formRef.validate(valid => {
      //     if (valid) {
      //         this.addDialog = false
      //     } else {
      //
      //     }
      // })
      if (this.ruleForm.date && this.ruleForm.date.length) {
        http_project_process
          .updateDate({
            id: this.currentNode.id,
            startTime: this.ruleForm.date[0],
            endTime: this.ruleForm.date[1]
          })
          .then(res => {
            this.$message.success(res.msg);
            this.getNodeList();
            this.addDialog = false;
          });
      } else {
        this.$message.error("时间选择不能为空");
      }
    },
    onSavetype() {
      http_project_process
        .updateType({
          id: this.typeid,
          status: this.type
        })
        .then(res => {
          this.$message.success(res.msg);
          this.type = "";
          this.typeid = "";
          this.getNodeList();
          this.addDialog2 = false;
        });
    },
    onSave() {}
  }
};
</script>

<style lang="scss">
.type {
  width: 63px;
  margin-top: 20px;
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 5px;
  color: #fff;
}
.add-page {
  padding: 52px 0 152px 92px;
  background: #ffffff;
  box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
  border-radius: 24px;
  .footer {
    padding-top: 90px;
    text-align: center;
  }
  .el-tabs {
    .el-tabs__item.is-active {
      background-color: transparent !important;
    }
  }
}
.add {
  width: 218px;
  height: 68px;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid #4880ff;
  line-height: 68px;
  font-size: 14px;
  color: #4880ff;
  margin-bottom: 33px;
  text-align: center;
  cursor: pointer;
}
.node-card {
  width: 308px;
  min-height: 98px;
  background: #4880ff;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  padding: 10px;
  margin-bottom: 33px;
  margin-right: 42px;
  .node-date,
  .node-name {
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    padding-right: 10px;
    color: #fff;
  }
  .node-name {
    font-size: 16px;
    font-weight: bold;
  }
  .node-date {
    margin-top: 5px;
  }
  .node-btn {
    height: 100%;
    cursor: pointer;
    i {
      color: #ffffff;
      font-size: 18px;
    }
  }
}
</style>
